<template>
    <div id="main">
        <div class="container">
            <div class="logo"><img src="../../assets/image/logo1.png" alt="">
                <h1>袋鼠优选</h1>
            </div>
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="headerimg" type="text" name="头像" label="头像" placeholder="头像"
                    :rules="[{ required: true, message: '请上传头像' }]" />
                <van-field v-model="nick" type="text" name="昵称" label="请填写昵称" placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">注册</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';

import { requestregistr } from '@/api/user.js'
import { Toast } from 'vant';
Vue.use(Toast);
export default {
    data() {
        return {
            username: '',
            password: '',
            headerimg: '',
            nick: '',
        };



    },
    methods: {

        async onSubmit() {

            let res = await requestregistr(
                this.username,
                this.password,
                this.headerimg,
                this.nick,
            )
            let data = res.data
            // console.log(data);
            let { resultCode, resultInfo } = data
            if (resultCode == 1) {
                Toast.success('注册成功！');
                // 注册成功后 随机生成一个id 保存到 user
                console.log(res);
                setTimeout(() => {
                    this.$router.push({ path: '/login' })
                }, 2000);
            } else {
                Toast.fail('注册失败~');
            }

            // axios({
            //     method: 'post',
            //     url: 'http://10.7.173.54:8089/api/sign',
            //     data: {
            //         username: this.username, password: this.password
            //     }
            // }).then(response => {
            //     let data = response.data
            //     let { resultCode, resultInfo } = data
            //     console.log(response);
            //     if (resultCode == 1) {
            //         Toast.success('成功文案');
            //         setTimeout(() => {
            //             this.$router.push({ path: '/login' })
            //         }, 2000);
            //     } else {
            //     }
            // })

        },
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0
}

#main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .container {
        width: 80vw;
        height: 80vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .van-form {
            .van-field {
                height: 50px;
                line-height: 50px;
            }
        }

        .van-uploader {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .logo {
            width: 160px;
            height: 160px;
            text-align: center;
            margin-top: 40px;
            color: white;

            img {
                width: 100%;
                height: 100%;
            }
        }

    }

}
</style>